<template>
<div id="skill-page-summary">
  <SkillPageDetail>
    <template v-slot:title>
      <h1>{{title}}</h1>
      <div class="condition">学习情况：有{{learnAmount}}人正在学，已有{{finishAmount}}人学习完成</div>
    </template>
    <template v-slot:main>
      <ContainerBox class="summary" type="primary">
        <div class="text" style="font-weight: 600">
          <p>技能摘要：{{summary}}</p>
        </div>
      </ContainerBox>
      <ContainerBox type="common" id="comment-list" class="comments">
        <div class="comments-title"><h2>评论区</h2></div>
        <div class="comments-main">
          <div class="no-comment" v-if="comments===null || comments.length===0">暂无人评论，快来抢沙发吧!</div>
          <div class="comment" v-for="comment in comments">
            <div class="content">
              <div>{{comment.nickname}}：</div>
              <div>{{comment.content}}</div>
            </div>
            <div class="delete-btn" v-if="comment.me" @click="deleteComment(comment.id)">
              删除
            </div>
          </div>
        </div>
        <div class="add" v-if="!isCommented" @click="dialogVisible = true">
          我也来评论
        </div>
      </ContainerBox>
    </template>
  </SkillPageDetail>
  <el-dialog
    title="评论"
    :visible.sync="dialogVisible"
    :before-close="clearComment"
    width="30%">
    <div>评个等级吧：{{star_msg}}</div>
    <el-rate v-model="star" style="margin: 10px"></el-rate>
    <el-input type="textarea" aria-placeholder="写下你的看法" v-model="myComment"></el-input>
    <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addComment">确 定</el-button>
          </span>
  </el-dialog>
</div>
</template>

<script>
import SkillPageDetail from '../skill_page_detail'
import ContainerBox from '../../../box/container_box'
export default {
  name: "skill_page_summary",
  data() {
    return {
      dialogVisible: false,
      myComment: '',
      star: 0,
      title: '',
      summary: '',
      learnAmount: 0,
      finishAmount: 0,
      comments: [],
      isCommented: true,
      currentPage: 1,
      stop: false
    }
  },
  computed: {
    star_msg() {
      let msg;
      switch(this.star) {
        case 0: msg='';break;
        case 1: msg='不太行';break;
        case 2: msg='一般般';break;
        case 3: msg='还可以';break;
        case 4: msg='挺好的';break;
        case 5: msg='太棒啦';break;
      }
      return msg;
    }
  },
  components: {
    SkillPageDetail, ContainerBox
  },
  mounted: function() {
    this.getDetailPage();
    this.scrollNewComments();
  },
  methods: {
    clearComment() {
      this.myComment = '';
      this.star = 0;
      this.dialogVisible = false;
    },
    getDetailPage: function() {
      const self = this;
      var id = this.$route.params.id;
      this.$axios({
        method: 'get',
        url: '/skill/skill/getSkillVO/' + id
      }).then(function (response) {
        var jsonString = JSON.stringify(response.data);
        var jsonObj = JSON.parse(jsonString);
        if (jsonObj.data.skillVo){
          console.log("front skillVo",jsonObj.data.skillVo);
          self.title = jsonObj.data.skillVo.name;
          self.summary = jsonObj.data.skillVo.summary;
          self.learnAmount = jsonObj.data.skillVo.learnAmount;
          self.finishAmount = jsonObj.data.skillVo.finishAmount;
          self.isCommented = jsonObj.data.skillVo.isCommented;
        }else {
          self.$router.push("/notfound?id="+id);
        }
      });
      self.getComments();
    },
    getComments: function() {
      var self = this;
      this.$axios({
        method: 'post',
        url: '/skill/comment/pageCommentCondition/'+self.currentPage+'/10',
        data:{
          skillId: self.$route.params.id
        }
      }).then(function (response) {
        var jsonString = JSON.stringify(response.data);
        var jsonObj = JSON.parse(jsonString);
        console.log(jsonObj);
        if(jsonObj.data.total===0) {
          self.comments = [];
          self.no_comment = true;
        } else {
          for (let i=0; i<10; i++) {
            if (jsonObj.data.rows[i] === undefined || jsonObj.data.rows[i] === null) {
              self.stop = true;
              break;
            }
            self.$set(self.comments,self.currentPage*10+i-10,jsonObj.data.rows[i]);
          }
          self.currentPage += 1;
          self.no_comment = false;
        }
        console.log(self.comments);
        // 自己有评论
        for (let c of self.comments) {
          if (c.me) {
            self.isCommented = true;
            break;
          }
        }
      });
    },
    // 滚动刷新
    scrollNewComments() {
      const self = this;
      const skillDetail = document.getElementById("skill-page-detail");
      const commentList = document.getElementById("comment-list");
      skillDetail.addEventListener("scroll", ()=> {
        if ( !self.stop && (300+commentList.offsetHeight- skillDetail.offsetHeight -skillDetail.scrollTop < 100)){// 右边数值越大，越早进行刷新
          self.getComments();
          console.log("scroll for new comments!");
        }
      });
    },
    addComment() {
      this.dialogVisible = false;
      const self = this;
        if (this.myComment === '') {
          this.$confirm('不能为空', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          }).then(() => {
          }).catch(() => {
          });
        } else {
          self.$axios({
            method: 'post',
            url: '/skill/comment/add/',
            data: {
              content: this.myComment,
              skillId: self.$route.params.id,
              star: self.star
            }
          }).then(function (response) {
            var jsonString = JSON.stringify(response.data);
            var jsonObj = JSON.parse(jsonString);
            if (jsonObj.success) {
              self.$message({
                type: 'success',
                message: '评论成功!'
              });
              self.isCommented = true;
            }
            self.clearComment();
            self.getComments();
          });
        }
    },
    deleteComment: function(id){
      const self = this;
      this.$confirm('该评论将被删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        self.$axios({
          method: 'delete',
          url: '/skill/comment/delete/'+id
        }).then(function (response) {
          var jsonString = JSON.stringify(response.data);
          var jsonObj = JSON.parse(jsonString);
          if (jsonObj.success) {
            self.$message({
              type: 'success',
              message: '删除成功!'
            });
            self.isCommented = false;
            self.getComments();
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../.././assets/style/common";
#skill-page-summary{
  .detail-title {
    .condition {
      float: right;
      font-size: 16px;
      margin-top: -30px;
      margin-right: 80px;
      color: #676767;
    }
  }
  .basic_info {
    .condition {

    }
  }
  .summary {
    max-height: 300px;
    .text {
      white-space: normal;
      /*overflow : hidden;
      display: -webkit-box;
      -webkit-line-clamp:3;
      -webkit-box-orient: vertical;*/
    }
  }
  .comments {
    box-sizing: border-box;
    padding: 10px 10px 25px;
    min-height: 400px;
    .comments-main {
      box-sizing: border-box;
      padding: 10px;
      border-radius: 10px;
      background-color: #f1f1f1;
      .no-comment {

      }
      .comment {
        display: flex;
        padding: 5px;
        justify-content: space-between;
        margin: 5px 0 10px;
        .content {
          display: flex;
        }
        .delete-btn {
          cursor: pointer;
          transition: 0.5s;
          &:hover {
            transition: 0.5s;
            color: darkred;
          }
        }
      }
    }
    .add {
      @include btn_add();
      width: 100px;
      margin-top: 30px;
    }
  }

}
</style>
